import React from "react";

export default class Form extends React.Component {
    static defaultProps = {
        defaultUsername: 'anoymous',
        btnText: '登录',
    }
    state = {
        username: this.props.defaultUsername,
    };

    onUserNameChange = e => {
        console.log('e.target.value', e.target.value);
        this.setState({ username: e.target.value});
        this.props.sayHello && this.props.sayHello();
    };

    render() {
        const { username } = this.state;
        const { btnText, windowWidth } = this.props;
        return (
            <>
                <form>
                    <input 
                    type="text" 
                    placeholder="请输入用户名" 
                    onChange={this.onUserNameChange}
                    value={username}
                    />
                    <input type="submit" value={btnText} />
                    窗口宽度：{windowWidth}
                </form>
            </>
        );
    }
}